import React from 'react';
import { connect } from 'dva';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Layout, Button } from 'antd';
import BaseComponent from 'components/BaseComponent';
import Toolbar from 'components/Toolbar';
import SearchBar from 'components/SearchBar';
import DataTable from 'components/DataTable';
import { ModalForm, ModalTree } from 'components/Modal';
import createColumns from './columns';
const { Content, Header, Footer } = Layout;
const Pagination = DataTable.Pagination;

@connect(({ roles, loading }) => ({
  roles,
  loading: loading.models.roles
}))
export default class extends BaseComponent {
  state = {
    record: null,
    visible: false,
    rows: [],
    permissionList: [],
    menuList: [],
    permissionFormVisible: false,
    menuFormVisible: false,
  };

  handleDelete = records => {
    const { rows } = this.state;

    this.props.dispatch({
      type: 'roles/remove',
      payload: {
        records,
        success: () => {
          // 如果操作成功，在已选择的行中，排除删除的行
          this.setState({
            rows: rows.filter(
              item => !records.some(jtem => jtem.id === item.id)
            )
          });
        }
      }
    });
  };

  showPermissionForm = record =>{
    this.props.dispatch({
      type: 'roles/getPermissionKeys',
      payload: {
        record,
        success: () =>{
          this.setState({
            record,
            permissionFormVisible: true,
          })
        }
      }
    })
  }

  showMenuForm = record =>{
    this.props.dispatch({
      type: 'roles/getMenuKeys',
      payload: {
        record,
        success: () =>{
          this.setState({
            record,
            menuFormVisible: true,
          })
        }
      }
    })

  }

  render() {
    const { roles, loading, dispatch } = this.props;
    const { pageData, permissionList, menuList, menuCheckedKeys, permissionCheckedKeys } = roles;
    const columns = createColumns(this);
    const { rows, record, visible, permissionFormVisible, menuFormVisible,} = this.state;

    const dataTableProps = {
      loading,
      columns,
      rowKey: 'id',
      dataItems: pageData,
      selectType: 'checkbox',
      showNum: true,
      isScroll: true,
      selectedRowKeys: rows.map(item => item.id),
      onChange: ({ pageNum, pageSize }) => {
        dispatch({
          type: 'roles/getPageInfo',
          payload: {
            pageData: pageData.jumpPage(pageNum, pageSize)
          }
        });
      },
      onSelect: (keys, rows) => this.setState({ rows })
    };

    const modalFormProps = {
      loading,
      record,
      visible,
      columns,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          record: null,
          visible: false
        });
      },
      // 新增、修改都会进到这个方法中，
      // 可以使用主键或是否有record来区分状态
      onSubmit: values => {
        const handleSuccess = () => {
          this.setState({
            record: null,
            visible: false
          });
        }
        var type = 'roles/save';
        if (values.id){
          type = 'roles/update';
        }
        dispatch({
          type: type,
          payload: {
            values,
            success: handleSuccess,
          }
        });
      }
    };

    const menuFormProps = {
      loading,
      // record,
      // columns,
      title: '编辑菜单',
      treeData: menuList,
      visible: menuFormVisible,
      checkedKeys: menuCheckedKeys,
      modalOpts: {
        width: 700
      },
      onCheck: (checkedKeys, halfCheckedKeys) =>{
        this.props.dispatch({
          'type': 'roles/updateMenuKeys',
          payload: {
            // keys: checkedKeys.concat(halfCheckedKeys),
            keys: checkedKeys,
          }
        })
      },
      onCancel: () => {
        this.setState({
          record: null,
          menuFormVisible: false,
        });
      },
      onSubmit: () => {
        const handleSuccess = () => {
          this.setState({
            record: null,
            menuFormVisible: false
          });
        }
        const type = 'roles/submitMenuKeys';
        const {record} = this.state;
        // if (values.id){
        //   type = 'roles/update';
        // }
        dispatch({
          type: type,
          payload: {
            success: handleSuccess,
            record: record,
          }
        });
      }
    };

    const permissionFormProps = {
      loading,
      title: '编辑权限',
      treeData: permissionList,
      visible: permissionFormVisible,
      checkedKeys: permissionCheckedKeys,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          record: null,
          permissionFormVisible: false,
        });
      },
      onCheck: (checkedKeys, halfCheckedKeys) =>{
        this.props.dispatch({
          'type': 'roles/updatePermissionKeys',
          payload: {
            keys: checkedKeys,
          }
        })
      },
      // 新增、修改都会进到这个方法中，
      // 可以使用主键或是否有record来区分状态
      onSubmit: () => {
        const handleSuccess = () => {
          this.setState({
            record: null,
            permissionFormVisible: false
          });
        }
        const type = 'roles/submitPermisssionKeys';
        const {record} = this.state;
        // if (values.id){
        //   type = 'roles/update';
        // }
        dispatch({
          type: type,
          payload: {
            success: handleSuccess,
            record: record,
          }
        });
      }
    };

    return (
      <Layout className="full-layout">
        <Header>
          <Toolbar
            appendLeft={
              <Button.Group>
                <Button type="primary" icon={<PlusOutlined />} onClick={this.onAdd}>
                  新增
                </Button>
                <Button
                  disabled={!rows.length}
                  onClick={e => this.onDelete(rows)}
                  icon={<DeleteOutlined />}
                >
                  删除
                </Button>
              </Button.Group>
            }
            // pullDown={<SearchBar type="grid" {...searchBarProps} />}
          >
            {/*<SearchBar group="abc" {...searchBarProps} />*/}
          </Toolbar>
        </Header>
        <Content>
          <DataTable {...dataTableProps} />
        </Content>
        <Footer>
          <Pagination {...dataTableProps} />
        </Footer>
        <ModalForm {...modalFormProps} />
        <ModalTree {...permissionFormProps} />
        <ModalTree {...menuFormProps} />
      </Layout>
    );
  }
}
